<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!-- 父组件模板 -->
		<div id="app">
			<cpn @itemclick="cpnClick" @jianclick="changecounter" @jiaclick="changecounter"></cpn>
			<div>{{tal}}</div>
		</div>
	</body>
	<!-- 子组件模板 -->
	<template id="cpn">
		<div>
			<button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
			<button @click="jian">-</button>
			<button @click="jia">+</button>
		</div>
	</template>
	<script type="text/javascript">
		//子组件
		const cpn = {
			template: '#cpn',
			data(){
				return {
					categories:[
						{
							id: 'aaa',
							name: '热门推荐'
						},
						{
							id: 'bbb',
							name: '手机数码'
						},
						{
							id: 'ccc',
							name: '家电家电'
						},
						{
							id: 'ddd',
							name: '地雷手枪'
						},
						{
							id: 'eee',
							name: '数码产品'
						}
					],
					counter: 0
				}
			},
			methods:{
				btnclick(item){
					this.$emit('itemclick', item)
				},
				jian(){
					console.log(this.counter);
					this.counter --
					this.$emit('jianclick', this.counter)
				},
				jia(){
					this.counter ++
					this.$emit('jiaclick', this.counter)
				}
			}
		}
		//父组件
		const app = new Vue({
			el: "#app",
			data: {
				message: 'hahahah',
				tal:0
			},
			methods:{
				cpnClick(item){
					console.log(item);
				},
				changecounter(counter){
					this.tal = counter
				}
			},
			components: {
				cpn
			}
		})
	</script>
</html>
